revision:
<div>
<input type="text" class="placeholder-custom" placeholder="Please enter user name to search">
<input type="text" placeholder="Please enter user name to search">
</div>
<style>
input {width: 15vw; height: 3vw; border: none; outline: none; display: block; margin: 1vw; border: solid 1px #dee0e9; padding: 1vw; border-radius: 1.5vw;}
.placeholder-custom::-webkit-input-placeholder {color: #babbc1; font-size: 1.2vw;}
</style>
Sometimes it is necessary to modify the color of the cursor
<div>
<input type="text" class="caret-color" placeholder=""/>
</div>
<style>
.caret-color {width: 25vw; padding: 1vw; margin-top: 2vw; border-radius: 1vw; border: solid 1px #ffd476; box-sizing: border-box; background-color: transparent; outline: none; color: lightgreen;
font-size: 1.4vw; caret-color: #ffd476;}
.caret-color::-webkit-input-placeholder { color: #4f4c5f; font-size: 1.4vw;}
</style>
By default, a small arrow will appear at the end of input type = "number", but sometimes we need to remove it. What should we do?
<div>
<input type="number" class="number" placeholder="input number"/>
<input type="number" class="no-arrow" placeholder="input number"/>
</div>
<style>
.number, .no-arrow{width: 25vw; padding: 1vw; margin-top: 1vw; border-radius: 1vw; border: solid 0.2vw #ffd476; box-sizing: border-box; background-color: transparent; outline: none;
color: #ffd476; font-size: 1vw; caret-color: #ffd476; display: block;}
.number::-webkit-input-placeholder {color: #4f4c5f;font-size: 1vw;}
.no-arrow::-webkit-input-placeholder {color: #4f4c5f;font-size: 1vw;}
.no-arrow::-webkit-outer-spin-button,.no-arrow::-webkit-inner-spin-button { -webkit-appearance: none;}
<div>
<label for="text-input">Text Input</label>
<input class="input" id="text-input" type="text" />
<label for="date-input">Date Input</label>
<input class="input" id="date-input" type="date" />
<label for="file-input">File Input</label>
<input id="file-input" class="input" type="file" />
<label for="readonly-input">Read-Only Input</label>
<input class="input" id="readonly-input" type="text" readonly
value="This can only be copied" />
<label for="disabled-input">Disabled Input</label>
<input class="input" id="disabled-input" type="text" disabled />
<label for="textarea">Textarea</label>
<textarea class="input" id="textarea"></textarea>
<label for="textarea-disabled">Textarea Disabled</label>
<textarea class="input" id="textarea-disabled" disabled></textarea>
</div>
<style>
:root {--input-border: #8b8a8b; --input-focus-h: 245; --input-focus-s: 100%; --input-focus-l: 42%;}
.input {margin-left:5vw; font-size: 16px; font-size: Max(16px, 1em);font-family: inherit; padding: 0.25em 0.5em;
background-color: aquamarine; border: 2px solid var(--input-border); border-radius: 4px;
transition: 180ms box-shadow ease-in-out;}
.input:focus {border-color: hsl(var(--input-focus-h), var(--input-focus-s),var(--input-focus-l));
box-shadow: 0 0 0 3px hsla(var(--input-focus-h), var(--input-focus-s), calc(var(--input-focus-l) + 40%), 0.8 );
outline: 3px solid transparent;}
.input:not(textarea) {line-height: 1; height: 2.25rem;}
input[type="file"] {font-size: 0.9em; padding-top: 0.35rem;}
textarea.input {resize: vertical;}
.input[readonly] {border-style: dotted; cursor: not-allowed; color: #777;}
.input[disabled] {--input-border: #ccc; background-color: #eee; cursor: not-allowed;}
label {margin-left:5vw; font-size: 1.125rem; font-weight: 500; line-height: 1;}
.input + label {margin-top: 2rem;}
</style>
<div class="spec">
<fieldset class="one">
<input id="Oone" type="text" placeholder=" " id="family-name"
minlength="5" required/>
<label id="Otwo"for="family-name">Full name</label>
</fieldset>
</div>
<style>
.one{border: none; padding: 0; position: relative;}
.Oone { font-size: 2vw; border: none; outline: none; border-bottom: 0.2vw solid var(--grey); padding: 2vw 0; transition: border-color
300ms;}
.one [type="text"]:focus {border-color: black;}
#Oone + #Otwo { font-size: 2vw; position: absolute; left: 0; top: 0; color: var(--grey); pointer-events: none; transform-origin: left;
transition: transform 300ms;}
#Oone:focus + #Otwo, #Oone:not(:placeholder-shown) + #Otwo { transform: scale(0.6) translateY(-40px);}
#Oone:not(:placeholder-shown):not(:focus):invalid {border-bottom: 3px solid var(--red);}
#Oone:not(:placeholder-shown):not(:focus):valid {border-bottom: 3px solid var(--green);}
</style>
<main>
<form action="login-api/">
<fieldset class="two">
<legend>Submit your data</legend>
<label for="email">enter your Gmail</label>
<input id="email" placeholder="Enter your email ending with
@gmail.com" pattern="^[a-zA-Z0-9_.+-][email protected]$" name="email"
type="email" required />
<span class="error-message">Enter a valid email ending with
@gmail.com</span>
<span class="success-message">Email correct</span>
<label for="score">Enter your test result</label>
<input id="score" placeholder="Enter number between 0 and 100"
type="number" name="score" min="65" max="100" required />
<span class="error-message">You haven't reached the minimum
score</span>
<span class="success-message">Congratulations for your excellent
score</span>
<label>Tick if you want to receive marketing spam from us
<input id="accept" name="marketing" type="checkbox"
required />
</label>
<button type="submit">Submit</button>
</fieldset>
</form>
</main>
<style>
:root {--input-border: #8b8a8b; --input-focus-h: 245; --input-focus-s: 100%; --input-focus-l: 42%;}
main {padding: 1vw;}
.two{border: none;}
legend {font-size: 1vw; font-weight: bold;}
input,button,label {display: block;}
input { width: 25vw; height: 2vw; padding: 1vw; font-size: 1vw; outline: none; border: 2px solid var(--grey);}
label {margin-top: 3vw;}
.error-message, .success-message {display: none;}
input:focus {border: 2px solid black;}
input:optional {background-color: 2px solid var(--yellow);}
.error-message {color: var(--red);}
.success-message {color: var(--blue); }
input:not(:placeholder-shown):not(:focus):valid {border: 2px solid var(--green);}
input:not(:placeholder-shown):not(:focus):invalid {border: 2px solid var(--red);}
input:not(:placeholder-shown):not(:focus):invalid + .error-message, input:not(:placeholder-shown):not(:focus):valid +
.error-message + .success-message {display: block;}
[type="checkbox"] {width: auto;}
[type="submit"] {width: 15vw; height: 3vw; margin-top: 2vw; border: none; background-color: var(--blue); cursor: pointer; }
form:invalid [type="submit"] {background-color: var(--grey); cursor: not-allowed; }
form:invalid [type="submit"]:active {pointer-events: none;}
</style>